
<template>
  <div>
    <div class="draggable-container form-body" :key="element.metaRefresh">
      <el-form ref="formRef" :model="lowCode.model" class="demo-dynamic" :label-width="element.options.labelWidth + 'px'"
        :label-position="element.options.labelPosition" :size="element.options.size">
        <draggable class="drawing-board" v-model="element.items" @add="handleAdd($event)"
          v-bind="{ group: 'group', animation: 200 }" tag="div" item-key="key" handle=".mover"
          :component-data="{ name: 'fade' }" :disabled="lowCode.disabled && element?.nestedChain?.indexOf('dialog') == -1
            ">
          <template #item="{ element: el, index }">
            <div>
              <low-code-parse :element="el" :key="el.key" :index="index" :parent="element">
              </low-code-parse>
            </div>
          </template>
        </draggable>
      </el-form>
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, inject, toRefs, ref } from "vue";
import type { LowCodeImp, Component } from "@/components/low-code/core/";
import { tools } from "@/components/low-code/page-designer/utils";
import clone from "clone";
import { useComponentPretreatment } from "@/components/low-code/page-designer/hooks";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "formWidget",
  props: ["element"],
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const { element } = toRefs<{ element: Component }>(props);

    const formRef = ref();
    (<{ ref: any }>element.value.options).ref = formRef;
    const handleAdd = (event: { newIndex: number }) => {
      let hasKey = false;
      const newIndex = event.newIndex;
      if (element.value.items[newIndex]) {
        /****
         * 组件预处理
         */
        if (useComponentPretreatment(lowCode, element.value, newIndex)) return false;
        hasKey = element.value.items[newIndex].key ? true : false;
        let cacheObject = lowCode.addComponent(
          element.value.items[newIndex]
        ) as Component;
        cacheObject.nestedChain = element.value.nestedChain + "_form";
        element.value.items[newIndex] = cacheObject;
        lowCode.setcurrentKey(cacheObject.key);
      }
      hasKey && element.value.updateMetaRefresh();
      tools.handleStack.push(clone(lowCode));
    };

    return {
      lowCode,
      formRef,
      element,
      handleAdd,
    };
  },
});
</script>

<style  scoped>
.drawing-board {
  min-height: 80px;
}
</style>
